<template>
  <div class="login-form-container">
    <h3 class="login-form-title">{{ t("login.reg") }}</h3>
    <el-form ref="formRef" :model="model" :rules="rules" size="large" class="login-form">
      <!-- 用户名 -->
      <el-form-item prop="username" class="form-item">
        <el-input
          v-model.trim="model.username"
          :placeholder="t('login.username')"
          class="login-input"
        >
          <template #prefix>
            <el-icon class="login-icon"><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-tooltip :visible="isCapsLock" :content="t('login.capsLock')" placement="right">
        <el-form-item prop="password" class="form-item">
          <el-input
            v-model.trim="model.password"
            :placeholder="t('login.password')"
            type="password"
            show-password
            class="login-input"
            @keyup="checkCapsLock"
            @keyup.enter="submit"
          >
            <template #prefix>
              <el-icon class="login-icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-tooltip>

      <el-tooltip :visible="isCapsLock" :content="t('login.capsLock')" placement="right">
        <el-form-item prop="confirmPassword" class="form-item">
          <el-input
            v-model.trim="model.confirmPassword"
            :placeholder="t('login.message.password.confirm')"
            type="password"
            show-password
            class="login-input"
            @keyup="checkCapsLock"
            @keyup.enter="submit"
          >
            <template #prefix>
              <el-icon class="login-icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-tooltip>

      <!-- 验证码 -->
      <el-form-item prop="captchaCode" class="form-item">
        <div class="captcha-container">
          <el-input
            v-model.trim="model.captchaCode"
            :placeholder="t('login.captchaCode')"
            class="login-input"
            @keyup.enter="submit"
          >
            <template #prefix>
              <div class="i-svg:captcha login-icon" />
            </template>
          </el-input>
          <div class="captcha-image" @click="getCaptcha">
            <el-icon v-if="codeLoading" class="is-loading"><Loading /></el-icon>

            <img v-else :src="captchaBase64" alt="code" />
          </div>
        </div>
      </el-form-item>

      <el-form-item class="form-item">
        <div class="agreement-section">
          <el-checkbox v-model="isRead" class="agreement-checkbox">
            {{ t("login.agree") }}
          </el-checkbox>
          <el-link type="primary" underline="never" class="agreement-link">
            {{ t("login.userAgreement") }}
          </el-link>
        </div>
      </el-form-item>

      <!-- 注册按钮 -->
      <el-form-item class="form-item">
        <el-button :loading="loading" type="primary" class="login-button" @click="submit">
          {{ t("login.register") }}
        </el-button>
      </el-form-item>
    </el-form>
    <div class="register-section">
      <el-text size="default" class="register-text">{{ t("login.haveAccount") }}</el-text>
      <el-link type="primary" underline="never" class="register-link" @click="toLogin">
        {{ t("login.login") }}
      </el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from "element-plus";
import { Lock } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import AuthAPI, { type LoginFormData } from "@/api/auth.api";

const { t } = useI18n();

const emit = defineEmits(["update:modelValue"]);
const toLogin = () => emit("update:modelValue", "login");

onMounted(() => getCaptcha());

const formRef = ref<FormInstance>();
const loading = ref(false); // 按钮 loading 状态
const isCapsLock = ref(false); // 是否大写锁定
const captchaBase64 = ref(); // 验证码图片Base64字符串
const isRead = ref(false);

interface Model extends LoginFormData {
  confirmPassword: string;
}

const model = ref<Model>({
  username: "厂家",
  password: "01230123",
  confirmPassword: "",
  captchaKey: "",
  captchaCode: "",
  rememberMe: false,
});

const rules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.username.required"),
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.password.required"),
      },
      {
        min: 6,
        message: t("login.message.password.min"),
        trigger: "blur",
      },
    ],
    confirmPassword: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.password.required"),
      },
      {
        min: 6,
        message: t("login.message.password.min"),
        trigger: "blur",
      },
      {
        validator: (_: any, value: string) => {
          return value === model.value.password;
        },
        trigger: "blur",
        message: t("login.message.password.inconformity"),
      },
    ],
    captchaCode: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.captchaCode.required"),
      },
    ],
  };
});

// 获取验证码
const codeLoading = ref(false);
function getCaptcha() {
  codeLoading.value = true;
  AuthAPI.getCaptcha()
    .then((data) => {
      model.value.captchaKey = data.captchaKey;
      captchaBase64.value = data.captchaBase64;
    })
    .finally(() => (codeLoading.value = false));
}

// 检查输入大小写
function checkCapsLock(event: KeyboardEvent) {
  // 防止浏览器密码自动填充时报错
  if (event instanceof KeyboardEvent) {
    isCapsLock.value = event.getModifierState("CapsLock");
  }
}

const submit = async () => {
  await formRef.value?.validate();
  loading.value = true;
  try {
    // 注册逻辑
    console.log("注册提交", model.value);
  } catch (error) {
    console.error("注册失败:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.login-form-container {
  width: 100%;
}

.login-form-title {
  text-align: center;
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--login-text-primary);
}

.login-form {
  .form-item {
    margin-bottom: 20px;
  }

  .login-input {
    :deep(.el-input__wrapper) {
      background: var(--login-input-bg);
      border: 1px solid var(--login-input-border);
      border-radius: 8px;
      transition: all 0.3s ease;
      box-shadow: none;

      &:hover {
        border-color: var(--login-primary-light);
      }

      &.is-focus {
        border-color: var(--login-input-focus-border);
        box-shadow: 0 0 0 2px rgba(0, 124, 198, 0.1);
      }
    }

    :deep(.el-input__inner) {
      color: var(--login-text-primary);
      font-size: 14px;
      height: 44px;

      &::placeholder {
        color: var(--login-text-secondary);
      }
    }

    :deep(.el-input__prefix) {
      color: var(--login-primary-color);
    }
  }

  .login-button {
    width: 100%;
    height: 44px;
    background: var(--login-primary-gradient);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;

    &:hover {
      background: var(--login-button-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 124, 198, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .captcha-container {
    display: flex;
    gap: 12px;
    align-items: center;

    .login-input {
      flex: 1;
    }

    .captcha-image {
      width: 120px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 1px solid var(--login-input-border);
      border-radius: 8px;
      background: var(--login-input-bg);
      transition: all 0.3s ease;

      &:hover {
        border-color: var(--login-primary-light);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
      }
    }
  }

  .agreement-section {
    display: flex;
    align-items: center;
    gap: 8px;

    .agreement-checkbox {
      :deep(.el-checkbox__input) {
        .el-checkbox__inner {
          border-color: var(--login-input-border);

          &:hover {
            border-color: var(--login-primary-light);
          }
        }

        &.is-checked {
          .el-checkbox__inner {
            background-color: var(--login-primary-color);
            border-color: var(--login-primary-color);
          }
        }
      }

      :deep(.el-checkbox__label) {
        color: var(--login-text-secondary);
        font-size: 14px;
      }
    }

    .agreement-link {
      color: var(--login-link-color);
      font-size: 14px;

      &:hover {
        color: var(--login-link-hover);
      }
    }
  }
}

.register-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--login-border-color);

  .register-text {
    color: var(--login-text-secondary);
    font-size: 14px;
  }

  .register-link {
    color: var(--login-link-color);
    font-size: 14px;
    font-weight: 500;

    &:hover {
      color: var(--login-link-hover);
    }
  }
}

.login-icon {
  color: var(--login-primary-color);
  font-size: 16px;
}
</style>
